<template>
	<div class="container" style="width:100%;height:100%;position:absolute;overflow:hidden;">
		<div ref="myEcharts" style="position:absolute;top:0px;left:0px;width:100%; height: 100%"></div>
	</div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ScatterChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GeoComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([TitleComponent, TooltipComponent, GeoComponent, ScatterChart, CanvasRenderer]);
import worldMap from '@/assets/world.json'
import { ref, onMounted, nextTick } from 'vue'
const myEcharts = ref()
const mapData = []
const props = defineProps({
    Data:Array
});
// const scatterData = props.value.data

const initMap = (mapData) => {
	console.log('data',props.Data)
	nextTick(() => {
		echarts.registerMap('world', worldMap)
		const myChart = echarts.init(myEcharts.value)
		const option = {
			title: {
				text: 'IP地址地图详情',
				left: 'center',
				top: 20,
			},
			// tooltip: {
			// 	triggerOn: 'mousemove',
			// 	formatter: function (params) {
			// 		// if (params?.data) {
			// 		// 	var a = `<span style="color:rgba(23, 240, 204)">国家名称：${params.data.name}</span></br>`
			// 		// 	var b = `<span style="color:rgba(23, 240, 204)">项目总数量：${params.data.projectTotal}</span></br>`
			// 		// 	var c = `<span style="color:rgba(23, 240, 204)">项目总投资额(亿元)：${params.data.projectInvestment}</span></br>`
			// 		// 	var d = `<span style="color:rgba(23, 240, 204)">在册中方员工数：${params.data.projecUserCN}</span></br>`
			// 		// 	return [a, b, c, d].join('')
			// 		// }
			// 	},
			// 	backgroundColor: 'rgba(29, 38, 71)',
			// 	// 额外附加的阴影
			// 	extraCssText: 'box-shadow:0 0 4px rgba(11, 19, 43,0.8);',
			// },
			geo: {
				name: 'IP地址',
				type: 'map',
				roam: true,
				map: 'world',
				// label: {
				// 	show: true,
				// },

				itemStyle: {
					normal: {
						borderColor: 'rgb(147, 235, 248)',
						borderWidth: 1,
						areaColor: {
							type: 'radial',
							x: 0.5,
							y: 0.5,
							r: 0.8,
							colorStops: [
								{
									offset: 0,
									color: '#396a92', // 0% 处的颜色
								},
								{
									offset: 1,
									color: '#396a92', // 100% 处的颜色
								},
							],
							globalCoord: true, // 缺省为 false
						},
					},
					emphasis: {
						areaColor: 'rgba(23, 240, 204)',
						shadowOffsetX: 0,
						shadowOffsetY: 0,
						borderWidth: 0,
					},
				},
				data: mapData,
			},
			tooltip: {
				trigger: 'item', // 触发类型：数据项图形触发  
				formatter: function (params) {
					// 自定义 tooltip 内容  
					return `${params.name}<br/>经度：${params.value[0]}<br/>纬度：${params.value[1]}`;
				}
			},
			series: [
				// {
				// 	name: 'IP地址',
				// 	type: 'map',
				// 	roam: true,
				// 	map: 'world',
				// 	// label: {
				// 	// 	show: true,
				// 	// },
				// 	itemStyle: {
				// 		normal: {
				// 			borderColor: 'rgb(147, 235, 248)',
				// 			borderWidth: 1,
				// 			areaColor: {
				// 				type: 'radial',
				// 				x: 0.5,
				// 				y: 0.5,
				// 				r: 0.8,
				// 				colorStops: [
				// 					{
				// 						offset: 0,
				// 						color: '#396a92', // 0% 处的颜色
				// 					},
				// 					{
				// 						offset: 1,
				// 						color: '#396a92', // 100% 处的颜色
				// 					},
				// 				],
				// 				globalCoord: true, // 缺省为 false
				// 			},
				// 		},
				// 		emphasis: {
				// 			areaColor: 'rgba(23, 240, 204)',
				// 			shadowOffsetX: 0,
				// 			shadowOffsetY: 0,
				// 			borderWidth: 0,
				// 		},
				// 	},
				// 	data: mapData,
				// },
				{
					// 散点图系列，用于在地图上显示经纬度点  
					name: 'IP 地理位置',
					// z-index:10,
					type: 'scatter',
					coordinateSystem: 'geo', // 使用地理坐标系  
					data: props.Data,
					symbolSize: 15, // 散点大小
					itemStyle: {
						normal: {
							color: 'red', // 散点颜色  
							borderColor: '#fff', // 散点边框颜色  
							borderWidth: 2, // 散点边框宽度  
							opacity: 0.7 // 散点透明度  
						}
					},
					// tooltip: {
					// 	trigger: 'item', // 触发类型：数据项图形触发  
					// 	formatter: function (params) {
					// 		// 自定义 tooltip 内容  
					// 		return `${params.name}<br/>经度：${params.value[0]}, 纬度：${params.value[1]}`;
					// 	}
					// }
					// label: {
					// 	show: true,
					// 	position: 'top', // 标签位置  
					// 	formatter: '{b}', // 显示数据项 name  
					// 	color: '#000', // 标签颜色  
					// 	fontSize: 12, // 标签字体大小  
					// 	backgroundColor: 'rgba(255, 255, 255, 0.7)' // 标签背景色（带透明度）  
					// }
				}
			],
		}
		myChart.setOption(option)

		// 自动轮播
		// let n = 0
		// let Carousel = setInterval(function () {
		// 	myChart.dispatchAction({
		// 		type: 'showTip',
		// 		seriesIndex: 0,
		// 		name: mapData[n].name,
		// 	})
		// 	myChart.dispatchAction({
		// 		type: 'mapToggleSelect',
		// 		seriesIndex: 0,
		// 		name: mapData[n].name,
		// 	})
		// 	n++
		// 	if (n == mapData.length) {
		// 		n = 0
		// 	}
		// }, 3000)
		// 鼠标移入有mapData数据的国家清除定时器
		// myChart.on('mouseover', function (params) {
		// 	if (params.data) {
		// 		clearInterval(Carousel)
		// 	}
		// })
		// 鼠标移出有mapData数据的国家清除定时器，并开起新的定时器
		// myChart.on('mouseout', function (params) {
		// 	if (params.data) {
		// 		clearInterval(Carousel) //停止定时器
		// 		Carousel = setInterval(function () {
		// 			myChart.dispatchAction({
		// 				type: 'showTip',
		// 				seriesIndex: 0,
		// 				name: mapData[n].name,
		// 			})
		// 			myChart.dispatchAction({
		// 				type: 'mapToggleSelect',
		// 				seriesIndex: 0,
		// 				name: mapData[n].name,
		// 			})
		// 			n++
		// 			if (n == mapData.length) {
		// 				n = 0
		// 			}
		// 		}, 3000)
		// 	}
		// })
	})
}

//初始化echarts实例
onMounted(() => {
	initMap(mapData)
})

</script>
<!-- <template>

</template>
<script>
</script> -->